<template>
    <div style="color:#a3a3a3;">
        <div>
            <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div v-for="(item, index) in goodslist" :key="index">
            <div>
                <span class="tt">下单时间：{{ item.addTime }}</span>
                <br />
                <span class="tt">订单编号：{{ addres.orderSn }}</span>
                <br />
                <span class="tt">订单留言： <van-field rows="1" type="textarea" placeholder="请输入留言,100字以内" maxlength="100" />
                </span>
            </div>
            <van-divider />
            <div>
                <div class="ts">
                    <span style=" padding-left: 20rem;">实付：<span style="color:red">￥{{ item.price *
                        item.number - addres.couponPrice
                    }}</span></span>
                    <div v-if="this.orderStatus == 101 || this.orderStatus == 201">
                        <span><van-button type="success" size="mini" @click="Cancel">取消订单</van-button></span>
                        <span> <van-button type="success" size="mini" @click="Topay">去付款</van-button></span>
                    </div>
                    <span v-if="this.orderStatus == 301"> <van-button type="success" size="mini"
                            @click="showConfirm">确认收货</van-button></span>
                </div>

            </div>
            <van-divider />
            <div class="tx">
                <span>商品信息</span>
                <span style="color:red;margin-right: 50px;">{{ addres.orderStatusText }}</span>
            </div>
            <div style="margin-top:30px;">
                <van-card :num="item.number" :price="item.price" :desc="item.specifications" :title="item.goodsName"
                    :thumb="item.picUrl" />
            </div>
        </div>

        <van-divider />

        <div>
            <div class="Ty">
                <span>{{ addres.consignee }}</span>
                <span style="margin-left:20rem">{{ addres.mobile }}</span>
                <br>
                <span>{{ addres.address }}</span>
            </div>
            <van-divider />
            <div class="Ty">
                <span>商品合计：￥{{ addres.actualPrice }}</span>
                <br>
                <span>运费：￥0</span>
                <br>
                <span>优惠：￥-{{ addres.couponPrice }}</span>
            </div>
            <van-divider />
            <div class="Ty">
                <span style="color:red;">实付￥{{ addres.goodsPrice - addres.couponPrice }}</span>
            </div>
        </div>


        <div style=" height:100mm;"></div>
    </div>
</template>


<script>
import { service } from "../api/config";
import { showConfirmDialog } from 'vant';
export default {
    data() {
        return {
            goodslist: [],
            addres: [],
            orderStatus: 0
        }
    },
    created() {
        this.getdatil();

    },
    methods: {
        onClickLeft() {
            this.$router.push("/MyOrders");
        },
        getdatil() {
            let orderId = this.$route.query.id;
            //console.log(orderId);
            service.get('/wx/order/detail', { params: { orderId: orderId } }).then((res) => {
                this.goodslist = res.data.data.orderGoods;
                console.log(res.data.data.orderGoods);
                this.addres = res.data.data.orderInfo;
                console.log(res.data.data.orderInfo);
                this.orderStatus = res.data.data.orderInfo.orderStatus;
            })
        },
        Cancel() {
            showConfirmDialog({
                message:
                    '确认取消此订单？'
            })
                .then(() => {
                    let orderId = this.$route.query.id;
                    console.log(orderId);
                    service.post('/wx/order/cancel', { orderId: orderId }
                    ).then((res) => {
                        console.log(res);
                        if (res.data.errmsg == "订单不能取消") {
                            this.showConfirms = !this.showConfirms
                            showToast('订单不能取消')
                        } else {
                            showToast('订单取消成功')
                            this.$router.push("/MyOrders")
                        }
                    })
                })
                .catch(() => {
                    // on cancel
                });
        },

        Topay() {
            if (this.orderStatus == 201) {
                showToast('订单已付款')
            } else {
                service.post('/wx/order/pay', { orderId: this.$route.query.id }).then
                    ((res) => {
                        console.log(res.data);
                        this.$router.push({
                            path: "PaymentResult",
                            query: { data: "success" }
                        })
                    })
            }
        },

        showConfirm() {
            let orderId = this.$route.query.id;
            service.post('/wx/order/confirm', {
                orderId: orderId
            }).then((res) => {
                console.log(res.data.errno);
                console.log(res.data);
                this.showpay = res.data.errno
                if (res.data.errno == 0) {
                    showToast('确认成功')
                    this.$router.push('/MyOrders')

                } else {
                    showToast('订单已取消或已确认，订单不能确认收货');
                    //this.$router.push('/MyOrders')
                }
            })
        },
        button() {
            this.showpay != this.showpay
        }
    },

}
</script>
<style scoped>
.tt {
    display: flex;
    /* margin-top: 10px; */
    padding-left: 20rem;
    white-space: nowrap
}

.tt input {
    padding: 0 0 0 0;
}

.van-field {
    flex-wrap: wrap;
    padding: 0px;
    line-height: revert;
}

.ts {
    display: flex;
    height: 20px;
    justify-content: space-between;
    align-items: center;
}

.ts1 {
    height: 30px;
    background: red;
    border: 0px solid #a3a3a3;
    border-radius: 10px;
    margin-left: 50px;
}

.ts2 {
    height: 30px;
    background: red;
    border: 0px solid #a3a3a3;
    border-radius: 10px;
    margin-right: 10rem 40rem 10rem 10rem;
}

.tx {
    display: flex;
    justify-content: space-between;
    color: #a3a3a3;
    margin-top: 10px;
    padding-left: 20rem;
}

.Ty {
    padding-left: 20rem;
}

.van-button--success {
    color: var(--van-button-success-color);
    /* background: var(--van-button-success-background); */
    /* border: var(--van-button-border-width) solid var(--van-button-success-border-color); */
    background: red;
    border: 0px;
    height: 30rem;
    margin: 10rem;
}

.button {
    background: red;
    border: 0px;
    height: 30rem;
    margin: 10rem;
}
</style>